<template>
 <div>
   <el-card class="box-card">
  <div slot="header" class="clearfix">
      <!--<el-button style="float: right; padding: 3px 0" type="text">修改</el-button>-->
  <div style="margin-top:0px;"><span style="font-weight: bold;font-size: 20px">最近公告</span></div>
  <div class="time">
    <el-date-picker
    @change="loadSay"
      v-model="value2"
      type="month"
      value-format="yyyy-MM"
      placeholder="选择月">
    </el-date-picker>
  </div>
  </div>
    <div class="block" :style="contentStyleObj">
      <el-timeline>
        <div><h2>{{ msg }}</h2></div>
        <el-timeline-item v-for="say in says" :key="say.id"  :timestamp="say.createTime | dateFmt('YYYY-MM-DD')" placement="top">
          <el-card>
            <h3>{{ say.title }}</h3>
            <div class="content">
              {{ say.content }}
            </div>
            <p style="float:right;">{{ say.issueName }} 提交于 {{ say.createTime | dateFmt('YYYY-MM-DD HH:mm:ss') }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
 </div>
</template>

<script>
 export default {
   name: 'SayIndex',
   data () {
     return {
       says:[],
       value2: '',
       contentStyleObj:{
         height: '',
       },
       msg: '',
     }
   },
   props: [],
   components: {

   },
   created () {},
   mounted () {this.addDate(),this.loadSay()},
   methods: {
     addDate(){
      const nowDate = new Date();
            const date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            const newmonth = date.month>10?date.month:'0'+date.month
            const day = date.date>10?date.date:'0'+date.date
            this.value2 = date.year + '-' + newmonth
    },
    loadSay(){
      var _this = this
      this.$axios.get('/say/' + this.value2).then(resp => {
      if (resp && resp.data.code === 200) {
      _this.says = resp.data.data

      if(_this.says == undefined ||_this.says == null || _this.says.length <= 0){
        _this.msg = "没有公告"
      }else{
        _this.msg = ''
      }

      if(resp.data.data.length < 3){
      _this.contentStyleObj.height='440px';
      }else{
       _this.contentStyleObj.height='';
      }
      }
    })
    },
   }
 }
</script>

<style lang="css" scoped>
 .box-card {
    margin-top: 5px;
    margin-left: 280px;
    width: 988px;
    height: auto;
    text-align: left;
  }
  .content{
    color: #303133;
    font-size: 17px;
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .time{
    width: auto;
    text-align: center;
  }
</style>
